<!DOCTYPE HTML>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf8" />
<title>拂晓词典 - dawnDict v1.2</title>
<!--
<script src="/static/js/tongji.js"></script>
more at ReadMe.txt
v0.1 基本可用
v0.5 添加修改单词功能；
v1.0 代码重构，分成好几个小py文件
v1.1 增加词典链接;url接收单词 http://ielts.dawneve.cc/dict/index.html?word=corrupt
v1.2 查词时，自动更新url
v1.3 添加微信语料库
v1.4 添加txt语料库

-->
<script src="/static/js/jquery.min.js"></script>
<style>
.wrap{width:800px; margin:0 auto;}
#logo{color:#eee;}
#word{
	padding:2px 10px; 
	border: 1px solid #e6e6e6;
	width: 500px;
	height: 47px;
    /*
    line-height: 47px;
    */
	border-radius: 5px;
	font-size: 14px;
}
#submit2{
	cursor: pointer;
    height: 47px;
    width: 113px;
	background-color: #dd0a20;
    background-image: -webkit-linear-gradient(top,#ea1e4c,#dd0a20);
	font-size: 16px;
    color: #fff;
    border-radius: 5px;
    margin-left: 19px;
    outline: 0;
	border-width: 0px;
}
#submit2:hover{
	background-color:#dd0a20;
	background-image:-webkit-linear-gradient(top,#fa2f6a,#f50e2d);
	background-image:-moz-linear-gradient(top,#fa2f6a,#f50e2d);
	background-image:-o-linear-gradient(top,#fa2f6a,#f50e2d);
	background-image:linear-gradient(top,#fa2f6a,#f50e2d)
}

#show{border:1px solid #feeeee; margin:5px; padding:5px;}

#box2_id{width:100%; border-width:0px; border-top:1px solid #eee; height:50%; min-height:800px;}

#otherDict{color:#eee;}
.fix,
.light{color:#ccc;}
.fix{margin-left:20px;}
#otherDict a, a.light{color:#aaa;}
#otherDict a:hover,a.light:hover{color:#00e;}


input::-webkit-input-placeholder{
  color: #eee;
  font-size: 16px;
}

.phonetic {
	color: #ccc;
    font-family: "lucida sans unicode",arial,sans-serif;
}
</style>
</head>



<body>
<div class=wrap>
	<span id=logo>拂晓词典</span>
	<input type='word' id='word' placeholder="Input a English word here" autocomplete="off">
	<button id='submit2'>翻译</button>
	<div id='show'></div>
</div>

	<iframe id='box2_id' name='box2'></iframe>


<script type="text/javascript">
//获取url中的参数 https://www.cnblogs.com/vicky-li/p/9145026.html
function getUrlParam(name) {
	var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"); //构造一个含有目标参数的正则表达式对象
	var r = window.location.search.substr(1).match(reg);  //匹配目标参数
	if (r != null) return unescape(r[2]); return null; //返回参数值
}


//获取单词，调动接口翻译，显示结果
var showTrans=function(){
	var word=$('#word').val().trim(); //两头去空格
	if(word=='')return;//空单词啥也不做

	$.get('http://127.0.0.1:20180/api/dict/'+word, function(res){
		console.log(res.status, "res.data:", res.data)

		//status==0 表示：查询到0条，就是失败
		if(res.status==0){
			$('#show').html(res.data.msg)
		}else{
			//console.log(res)
			data=res.data

			addButtonHtml=""
			modifyButtonHtml=""
			searchHistoryButtonHtml=""
			//如果是新词: 显示添加按钮
			if(data.isNewWord){
				addButtonHtml='<button style="color:red;cursor:pointer;" onclick=\"addWord2DB(\''+word+'\')\">添加生词到数据库</button>'
			}else{
				//如果不是新词：显示修改按钮
				modifyButtonHtml='<a class="fix" target=_blank href="updateWord.html?id='+data.id+'">[修改]</a>'
				searchHistoryButtonHtml='<a class="fix" target=_blank href="searchHistory.html?word='+data.word+'&limit=20">[搜索历史]</a>'
			}

			$('#show').html( '<b>'+data.word +'</b> '+
				modifyButtonHtml+
				addButtonHtml+
				searchHistoryButtonHtml+
				'<br><span class=phonetic>'+ data.phoneticSymbol +'</span><br>'+
				data.meaning);
			
			//添加其他词典的链接 悬浮显示
			$('#show').append('<div id=otherDict>本窗口: <a target=box2 href="https://dict.youdao.com/w/eng/'+word+'/#keyfrom=dict2.index">有道词典</a> | '+
				'<a target=box2 href="https://cn.bing.com/dict/search?q='+word+'">bing翻译</a> | '+

				' | <a target=_blank href="https://fanyi.baidu.com/#en/zh/'+word+'">百度</a> | '+
				'<a target=_blank href="https://dict.eudic.net/dicts/en/'+word+'">欧路</a> | '+
				'<a target=_blank href="https://dict.cn/search?q='+word+'">海词</a> | '+
				'<a target=_blank href="https://dictionary.cambridge.org/dictionary/english-chinese-simplified/'+word+'">剑桥英汉</a> | '+
				'<a target=_blank href="https://www.deepl.com/en/translator">DeepL翻译</a> | '+
				'<a target=_blank href="https://www.ahdictionary.com/word/search.html?q='+word+'">ahdict</a> | '+
				'<a target=_blank href="https://www.google.com/search?q='+word+'+site%3Anature.com">学术</a> | '+
				//https://www.google.com/search?q=prominent+site%3Anature.com
				
				'<br>新窗口: <a target=_blank href="https://www.collinsdictionary.com/dictionary/english/'+word+'">柯林斯</a> | '+
				'<a target=_blank href="https://www.oxfordlearnersdictionaries.com/definition/english/'+word+'">牛津</a> | '+
				//'<a target=_blank href="https://www.oed.com/search?searchType=dictionary&q='+word+'&_searchBtn=Search" title="历史用法">牛津2</a> | '+
				'<a target=_blank href="https://www.ldoceonline.com/dictionary/'+word+'" title="大量例句">朗文</a> | '+
				'<a target=_blank href="https://dictionary.cambridge.org/dictionary/english/'+word+'">剑桥</a> | '+
				'<a target=_blank href="https://www.merriam-webster.com/dictionary/'+word+'">韦氏</a> | '+
				//'<a target=_blank href="http://www.webster-dictionary.net/definition/'+word+'">韦氏2</a> | '+
				'<a target=_blank href="https://www.macmillandictionary.com/dictionary/british/'+word+'">麦克</a> | '+
				'<a target=_blank href="https://www.dictionary.com/browse/'+word+'">dict</a> | '+
				'<a target=_blank href="https://www.thefreedictionary.com/'+word+'">free</a> | '+
				//'<a target=_blank href="https://www.lexico.com/en/definition/'+word+'">lexico</a> | '+
				'<a target=_blank href="https://www.synonyms.com/synonym/'+word+'">同义词</a> | '+
				//
				'<a target=_blank href="https://sentencedict.com/'+word+'.html">s句</a> | '+
				'<a target=_blank href="https://sentence.yourdictionary.com/'+word+'">Y句</a> | '+
				'<a target=_blank href="sentence.html?page=1&word='+word+'" title="好句子库">拂晓语料</a> | '+
				'<a target=_blank href="sentence2.html?page=1&word='+word+'" title="微信公众号全文 in MySQL">wx</a> | '+
				'<a target=_blank href="sentence3.html?page=1&word='+word+'" title="txt全文 in Sqlite3">txt</a> | '+
				'<a target=_blank href="https://ludwig.guru/s/'+word+'">guru</a> | '+
				
				'</div>'
			)
			
			//默认查有道词典
			$('#box2_id')[0].src='https://dict.youdao.com/w/'+word
			//抢焦点
			setTimeout(function(){
				//$('#word').focus();
				$('#word').select();
			},1000)
		}
	})
	
	//不刷新，更新url
	history.replaceState({}, "", "/dict/index.html?word="+word);
}


// 添加新单词到数据库
function addWord2DB(word){
	console.log("you clicked with word=", word)

	var word=$('#word').val().trim(); //两头去空格
	if(word=='')return;//空单词啥也不做

	$.get('http://127.0.0.1:20180/api/dict/'+word+"?save=yes", function(res){
		console.log(res.status, "res.data:", res.data)
		if(res.status==0){
			$('#show').html(res.data.msg)
		}else{
			console.log("Save the word |", word ,"| to DB. ", res.data.isNewWord==1?"new(not in DB)":"old(in DB)")
			alert("Save to DB now!")
			//data=res.data
			//强制刷新
			document.location=document.location
		}
	})
}


$(document).ready(function(){
	$('#word').focus(); //自动获取焦点
	
	//点击按钮
	$("#submit2").click(showTrans);
	//点回车键
	$('#word').keydown(function(){
		if(event.key=='Enter'){
			showTrans();
		}
	});
	
	//鼠标悬停选择全部单词
	$('#word').hover(function(){
		this.select();
	})
	
	//如果url带单词进来，则直接填充单词框，并查单词
	var word=getUrlParam('word')
	if(word){
		console.log(word)
		$('#word').val(word);
		showTrans();
	}

});
</script>

<div class="wrap light">
	<a target="_blank" href='stat.html' class=light>统计信息</a> | 
	<a target="_blank" href='addWord.html' class=light>添加生词</a>
	<a target="_blank" href='addSentence.html' class=light>添加语料</a>
	<a target="_blank" href='sentence.html?page=1' class=light>查看拂晓语料库</a> | 
	<a target="_blank" href='sentence2.html?page=1' class=light>查看wx语料库</a> | 
	<a target="_blank" href='recite.html' class=light>背单词拼写</a>
	<a target="_blank" href='scanWord.html?page=1' class=light>刷单词</a>
</div>
</body>
</html>